	<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
	<title>分类列表</title>
</head>
	
<body>
	<div id="app">
		<div class="top" id="topBar">
			<p>分类</p>
		</div>
		<div id="container" class="inlinkFlex" v-cloak>
			<div class="leftbar">
				<p class="barItem" v-for="categoryItem in categoryList" :class="{active:bar === categoryItem.Category.TopNum}" @click="onBar(categoryItem.Category.TopNum)">{{categoryItem.Category.TopText}}</p>
			</div>
			<div class="rightContent" v-cloak>

				<div v-show="bar === 'one'">
					<div class="categoryItem inlinkFlex" v-for="oneItem in oneList.OneProduct">
						<a href="detail.html" class="inlinkFlex" style="width: 100%;">
							<div class="shopImg">
								<img v-lazy="oneItem.GoodsImage" />
							</div>
							<div class="shopText">
								<p v-text="">{{oneItem.GoodsName}}</p>
								<p class="shopIntro">{{oneItem.GoodsInfo}}</p>
								<p class="shopCoach">¥ {{oneItem.GoodsPrice}}</p>	
							</div>
						</a>
					</div>
				</div>
				<div v-show="bar === 'two'">
					<div class="categoryItem inlinkFlex" v-for="twoItem in twoList.TwoProduct">
						<a href="detail.html" class="external inlinkFlex">
							<div class="shopImg">
								<img v-lazy="twoItem.GoodsImage" />
							</div>
							<div class="shopText">
								<p>{{twoItem.GoodsName}}</p>
								<p class="shopIntro">{{twoItem.GoodsInfo}}</p>
								<p class="shopCoach">¥ {{twoItem.GoodsPrice}}</p>
								
							</div>
						</a>

					</div>
				</div>
				<div v-show="bar === 'three'">
					<div class="categoryItem inlinkFlex" v-for="threeItem in threeList.ThreeProduct">
						<a href="detail.html" class="external inlinkFlex">
							<div class="shopImg">
								<img v-lazy="threeItem.GoodsImage" />
							</div>
							<div class="shopText">
								<p>{{threeItem.GoodsName}}</p>
								<p class="shopIntro">{{threeItem.GoodsInfo}}</p>
								<p class="shopCoach">¥ {{threeItem.GoodsPrice}}</p>
								
							</div>
						</a>

					</div>
				</div>
				<div v-show="bar === 'four'">
					<div class="categoryItem inlinkFlex" v-for="fourItem in fourList.FourProduct">
						<a href="detail.html" class="external inlinkFlex">
							<div class="shopImg">
								<img v-lazy="fourItem.GoodsImage" />
							</div>
							<div class="shopText">
								<p>{{fourItem.GoodsName}}</p>
								<p class="shopIntro">{{fourItem.GoodsInfo}}</p>
								<p class="shopCoach">¥ {{fourItem.GoodsPrice}}</p>
								
							</div>
						</a>

					</div>
				</div>
				<div v-show="bar === 'five'">
					<div class="categoryItem inlinkFlex" v-for="fiveItem in fiveList.FiveProduct">
						<a href="detail.html" class="external inlinkFlex">
							<div class="shopImg">
								<img v-lazy="fiveItem.GoodsImage" />
							</div>
							<div class="shopText">
								<p>{{fiveItem.GoodsName}}</p>
								<p class="shopIntro">{{fiveItem.GoodsInfo}}</p>
								<p class="shopCoach">¥ {{fiveItem.GoodsPrice}}</p>
								
							</div>
						</a>

					</div>
				</div>
				<div v-show="bar === 'six'">
					<div class="categoryItem inlinkFlex" v-for="sixItem in sixList.SixProduct">
						<a href="detail.html" class="external inlinkFlex">
							<div class="shopImg">
								<img v-lazy="sixItem.GoodsImage" />
							</div>
							<div class="shopText">
								<p>{{sixItem.GoodsName}}</p>
								<p class="shopIntro">{{sixItem.GoodsInfo}}</p>
								<p class="shopCoach">¥ {{sixItem.GoodsPrice}}</p>
								
							</div>
						</a>

					</div>
				</div>
			</div>
		</div>
		<div class="footer inlinkFlex-around">
			<div class="footer-item">
				<a href="../index.html">
					<i class="icon footerIcon footerHomeIcon"></i>
					<p class="footer-title">首页</p>
				</a>
			</div>
			<div class="footer-item active">
				<a href="category.html">
					<i class="icon footerIcon footerCategoryIcon"></i>
					<p class="footer-title">分类</p>
				</a>
			</div>
			<div class="footer-item">
				<a href="cart.html">
					<i class="icon footerIcon footerCartIcon"></i>
					<p class="footer-title">购物车</p>
				</a>
			</div>
			<div class="footer-item">
				<a href="member.html">
					<i class="icon footerIcon footerMemberIcon"></i>
					<p class="footer-title">我的</p>
				</a>
			</div>
		</div>
		<!--提示成功弹窗-->
		<div class="model" v-show="successModel" v-cloak>
			<div class="model-content tip-content">
				<p>添加成功</p>
				<p @click="successModel=false">确定</p>
			</div>
		</div>
	</div>
</body>
</html>